<%--
  Created by IntelliJ IDEA.
  User: 0xdF
  Date: 2022/11/9
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<html>
<head>
    <title>汽车列表界面</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
<jsp:include page="./head.jsp"/>
<center>
    <div style="margin: 60px">
        <table cellpadding="1" border="1" width="70%" height="30%">
            <th>ID</th>
            <th>汽车名</th>
            <th>类型</th>
            <th>价格</th>
            <th>操作</th>
            <tr>
                <td>1</td>
                <td>JEEP</td>
                <td>越野车</td>
                <td>188000</td>
                <td>
                    <div>
                        <button onclick='edit(this)'>编辑</button>
                        <button onclick='del(this)'>删除</button>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</center>
<script>
    let cars = [];

    function addCar(id,name,type,price){
        let car = new Object();
        car.id = id;
        car.name = name;
        car.type = type;
        car.price = price;
        return car;
    }


    function getCars(){
        $.ajax({
            url:'../car/show.do',
            success:function (res){
                console.log(res);
                let i = 0;
                for(let i = 0;i<res.count;i++){
                    cars.push(addCar(res.data[i].id,res.data[i].name,res.data[i].type,res.data[i].price))
                }
                ShowCars();

            }
        })
    }

    $().ready(function (){
        getCars();
    })

    function ShowCars(){
        for(let i = 0;i<cars.length;i++){
            let tr = document.createElement("tr");　//创建表格
            for(let j = 0;j<5;j++){
                let td = document.createElement("td");
                tr.append(td);
            }
            tr.getElementsByTagName("td")[0].innerText = cars[i].id;
            tr.getElementsByTagName("td")[1].innerText = cars[i].name;
            tr.getElementsByTagName("td")[2].innerText = cars[i].type;
            tr.getElementsByTagName("td")[3].innerText = cars[i].price;
            tr.getElementsByTagName("td")[4].innerHTML = `<div>
                        <button onclick='edit(`+i+`)'>编辑</button>
                        <button onclick="del(`+i+`)">删除</button>
                    </div>`
            //插入当前页面
            document.getElementsByTagName("tbody")[0].appendChild(tr);
        }
    }

    function del(event){

    }

    function edit(event){

    }


</script>
</body>
</html>
